import TinyReact from './TinyReact'

const container = document.getElementById('root')

const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="13" />
  </div>
)
const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段被修改过的内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" />
  </div>
)
TinyReact.render(virtualDOM, container)

setTimeout(() => {
  TinyReact.render(modifyDOM, container)
}, 2000)
// console.log(virtualDOM)
const Demo = () => {
  return <div>Hello</div>
}
const Heart = (props) => {
  return (

    // <div>&hearts;{props.titile}<Demo/></div>
    <Demo />
  )
}
class Alert extends TinyReact.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <div>Hello TinyReact{this.props.title}</div>
    )
  }
}
// console.log(<Heart />)
// TinyReact.render(<Alert title="我要学"/>, container)
